<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="div">
        <p class="p1">hhhh1</p>
        <p class="p2">hhhh2</p>
        <p class="p3">hhhh3</p>
        <p class="p4">hhhh4</p>
        <h1>qwerqwerqwreqwer</h1>
    </div>
    <p class="p8">hhhh4</p>
    
    姓名：<input type="text" name="name"> 12

</body>

<script>
     let parent = document.querySelector(".div");
    // let child = parent.removeChild(document.querySelector(".p8"));
    // console.dir(child);
    // console.log(console.dir(child));

    console.log(parent.style)
    parent.style.fontSize = 20 + "px";
    parent.style.backgroundColor = "red"; 

   // let element = document.createElement("h3");
    // element.innerHTML = "xxx";

    // let divBox = document.querySelector("div");
    // divBox.appendChild(element)

    // let newNode = document.createElement("p");
    // newNode.innerHTML = "yyy";

    // divBox.insertBefore(newNode, null);
    // // divBox.insertBefore(newNode, document.querySelector(".p1"));
    // // divBox.insertBefore(newNode, document.querySelector(".p2"));
    // // divBox.insertBefore(newNode, document.querySelector(".p3"));
    // // divBox.insertBefore(newNode, document.querySelector(".p4"));
    // divBox.insertBefore(newNode, document.querySelector("p1"));
    // divBox.insertBefore(newNode, document.querySelector("p2"));
    // divBox.insertBefore(newNode, document.querySelector("p3"));
    // divBox.insertBefore(newNode, document.querySelector("p4"));
    // divBox.insertBefore(newNode, document.querySelector("h1"));

    // console.log(document.querySelector("p4"));

</script>

</html>